<!DOCTYPE html>
<html class="wide wow-animation" lang="en">
  <head>
    <title>Progress Bars</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,700%7CMontserrat:400,500,600">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/fonts.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="preloader">
      <div class="preloader-body">
        <div class="cssload-container">
          <div class="cssload-speeding-wheel"></div>
        </div>
        <p>Loading...</p>
      </div>
    </div>
    <div class="page">
      <header class="section page-header">
        <!--RD Navbar-->
        <div class="rd-navbar-wrap">
          <nav class="rd-navbar rd-navbar-classic" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-static" data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static" data-lg-stick-up-offset="46px" data-xl-stick-up-offset="46px" data-xxl-stick-up-offset="46px" data-lg-stick-up="true" data-xl-stick-up="true" data-xxl-stick-up="true">
            <div class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" data-rd-navbar-toggle=".rd-navbar-collapse"><span></span></div>
            <div class="rd-navbar-main-outer">
              <div class="rd-navbar-main">
                <!--RD Navbar Panel-->
                <div class="rd-navbar-panel">
                  <!--RD Navbar Toggle-->
                  <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button>
                  <!--RD Navbar Brand-->
                  <div class="rd-navbar-brand">
                    <!--Brand--><a class="brand" href="index.html"><img class="brand-logo-dark" src="images/logo-default-225x39.png" alt="" width="112" height="19"/><img class="brand-logo-light" src="images/logo-default-225x39.png" alt="" width="112" height="19"/></a>
                  </div>
                </div>
                <div class="rd-navbar-main-element">
                  <div class="rd-navbar-nav-wrap">
                    <ul class="rd-navbar-nav">
                      <li class="rd-nav-item"><a class="rd-nav-link" href="index.html">Home</a>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="about.html">About</a>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="tours.html">Tours</a>
                        <ul class="rd-menu rd-navbar-dropdown">
                          <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="single-tour.html">Single Tour</a>
                          </li>
                        </ul>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="services.html">Services</a>
                        <ul class="rd-menu rd-navbar-dropdown">
                          <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="single-service.html">Single Service</a>
                          </li>
                        </ul>
                      </li>
                      <li class="rd-nav-item active"><a class="rd-nav-link" href="#">Pages</a>
                        <ul class="rd-menu rd-navbar-megamenu">
                          <li class="rd-megamenu-item">
                            <h6 class="rd-megamenu-title"><a href="pages-1.html">Pages 1</a></h6>
                            <ul class="rd-megamenu-list">
                              <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="typography.html">Typography</a></li>
                              <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="buttons.html">Buttons</a></li>
                              <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="forms.html">Forms</a></li>
                              <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="tabs-and-accordions.html">Tabs and accordions</a></li>
                              <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="progress-bars.html">Progress bars</a></li>
                              <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="tables.html">Tables</a></li>
                            </ul>
                          </li>
                          <li class="rd-megamenu-item">
                            <h6 class="rd-megamenu-title">Pages 2</h6>
                            <ul class="rd-megamenu-list">
                              <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="grid-system.html">Grid system</a></li>
                              <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="privacy-policy.html">Privacy policy</a></li>
                              <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="search-results.html">Search results</a></li>
                              <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="under-construction.html">Under-construction</a></li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="contacts.html">Contacts</a>
                      </li>
                    </ul>
                  </div>
                  <!--RD Navbar Search-->
                  <div class="rd-navbar-search">
                    <button class="rd-navbar-search-toggle rd-navbar-fixed-element-2" data-rd-navbar-toggle=".rd-navbar-search"><span></span></button>
                    <form class="rd-search" action="search-results.html" data-search-live="rd-search-results-live" method="GET">
                      <div class="form-wrap">
                        <label class="form-label" for="rd-navbar-search-form-input">Search...</label>
                        <input class="rd-navbar-search-form-input form-input" id="rd-navbar-search-form-input" type="text" name="s" autocomplete="off">
                        <div class="rd-search-results-live" id="rd-search-results-live"></div>
                      </div>
                      <button class="rd-search-form-submit fa-search" type="submit"></button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </header>
      <!-- Breadcrumbs-->
      <section class="breadcrumbs-custom bg-image context-dark" style="background-image: url(images/breadcrumbs-bg.jpg);" data-preset='{"title":"Breadcrumbs","category":"header","reload":false,"id":"breadcrumbs"}'>
        <div class="container">
          <h4 class="breadcrumbs-custom-title">Progress bars</h4>
          <ul class="breadcrumbs-custom-path">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Pages</a></li>
            <li class="active">Progress bars</li>
          </ul>
        </div>
      </section>
      <!--Skill Bars-->
      <section class="section section-md bg-default">
        <div class="container">
          <div class="text-center">
            <h2>Progress Bars, Skill Bars, Counters</h2>
            <p>These elements are vital to design of every website, and with them you can improve the overall look of your resource and attract more clients.</p>
          </div>
          <div class="row justify-content-md-center row-md-reverse row-lg-justify row-50">
            <div class="col-md-10 col-lg-6 col-xl-5">
              <h4>Welcome to Our Website</h4>
              <p>Welcome to our wonderful world. We sincerely hope that each and every user entering our website will find exactly what he/she is looking for. With advanced features of activating account and new login widgets, you will definitely have a great experience of using our web page. It will tell you lots of interesting things about our company, its products and services, highly professional staff and happy customers.</p>
            </div>
            <div class="col-md-10 col-lg-6">
              <!--Linear progress bar-->
              <div class="progress-linear">
                <div class="progress-linear-header">
                  <p class="progress-linear-title">Knowledge</p><span class="progress-linear-counter">75</span>
                </div>
                <div class="progress-linear-body">
                  <div class="progress-linear-bar"></div>
                </div>
              </div>
              <!--Linear progress bar-->
              <div class="progress-linear">
                <div class="progress-linear-header">
                  <p class="progress-linear-title">Dedication</p><span class="progress-linear-counter">85</span>
                </div>
                <div class="progress-linear-body">
                  <div class="progress-linear-bar"></div>
                </div>
              </div>
              <!--Linear progress bar-->
              <div class="progress-linear">
                <div class="progress-linear-header">
                  <p class="progress-linear-title">Professionalism</p><span class="progress-linear-counter">80</span>
                </div>
                <div class="progress-linear-body">
                  <div class="progress-linear-bar"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!--Counters-->
      <section class="section section-md bg-accent text-center">
        <div class="container">
          <div class="row row-30">
            <div class="col-6 col-md-3">
              <!--Counter-->
              <div class="box-counter">
                <div class="box-counter-main">
                  <div class="counter">16000</div>
                </div>
                <div class="box-counter-divider"></div>
                <p class="box-counter-title">Tours &amp; cruises</p>
              </div>
            </div>
            <div class="col-6 col-md-3">
              <!--Counter-->
              <div class="box-counter">
                <div class="box-counter-main">
                  <div class="counter">20</div>
                </div>
                <div class="box-counter-divider"></div>
                <p class="box-counter-title">Awards Won</p>
              </div>
            </div>
            <div class="col-6 col-md-3">
              <!--Counter-->
              <div class="box-counter">
                <div class="box-counter-main">
                  <div class="counter">20</div>
                  <div class="counter-postfix">k</div>
                </div>
                <div class="box-counter-divider"></div>
                <p class="box-counter-title">Regular clients</p>
              </div>
            </div>
            <div class="col-6 col-md-3">
              <!--Counter-->
              <div class="box-counter">
                <div class="box-counter-main">
                  <div class="counter">99</div>
                  <div class="counter-postfix">%</div>
                </div>
                <div class="box-counter-divider"></div>
                <p class="box-counter-title">Satisfied Customers</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!--Circle Progress Bars-->
      <section class="section section-md bg-default text-center">
        <div class="container">
          <h3>Circle Progress Bars</h3>
          <div class="row justify-content-center row-20 offset-lg">
            <div class="col-sm-5 col-lg-3">
              <!--Circle progress bar-->
              <div class="progress-circle">
                <div class="progress-circle-block">
                  <svg class="progress-circle-bar" x="0" y="0" width="150" height="150" viewbox="0 0 150 150">
                    <circle class="progress-circle-bg" cx="75" cy="75" r="70"></circle>
                    <circle class="progress-circle-fg clipped" cx="75" cy="75" r="70"></circle>
                  </svg>
                  <div class="progress-circle-counter">40</div>
                </div>
                <p class="progress-circle-title">Leadership</p>
              </div>
            </div>
            <div class="col-sm-5 col-lg-3">
              <!--Circle progress bar-->
              <div class="progress-circle">
                <div class="progress-circle-block">
                  <svg class="progress-circle-bar" x="0" y="0" width="150" height="150" viewbox="0 0 150 150">
                    <circle class="progress-circle-bg" cx="75" cy="75" r="70"></circle>
                    <circle class="progress-circle-fg clipped" cx="75" cy="75" r="70"></circle>
                  </svg>
                  <div class="progress-circle-counter">50</div>
                </div>
                <p class="progress-circle-title">Management</p>
              </div>
            </div>
            <div class="col-sm-5 col-lg-3">
              <!--Circle progress bar-->
              <div class="progress-circle">
                <div class="progress-circle-block">
                  <svg class="progress-circle-bar" x="0" y="0" width="150" height="150" viewbox="0 0 150 150">
                    <circle class="progress-circle-bg" cx="75" cy="75" r="70"></circle>
                    <circle class="progress-circle-fg clipped" cx="75" cy="75" r="70"></circle>
                  </svg>
                  <div class="progress-circle-counter">60</div>
                </div>
                <p class="progress-circle-title">Innovation and creativity</p>
              </div>
            </div>
            <div class="col-sm-5 col-lg-3">
              <!--Circle progress bar-->
              <div class="progress-circle">
                <div class="progress-circle-block">
                  <svg class="progress-circle-bar" x="0" y="0" width="150" height="150" viewbox="0 0 150 150">
                    <circle class="progress-circle-bg" cx="75" cy="75" r="70"></circle>
                    <circle class="progress-circle-fg clipped" cx="75" cy="75" r="70"></circle>
                  </svg>
                  <div class="progress-circle-counter">170</div>
                </div>
                <p class="progress-circle-title">Resilience</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <footer class="section footer-classic context-dark">
        <div class="container">
          <div class="row row-narrow-40 row-30">
            <div class="col-lg-6 text-center wow fadeInLeft" data-wow-delay=".1s">
              <div class="footer-media"><img src="images/footer-img-570x402.jpg" alt="" width="570" height="402"/>
              </div>
            </div>
            <div class="col-lg-6 wow fadeInRight" data-wow-delay=".2s">
              <div class="footer-classic_subscribe">
                <h2>Newsletter Signup</h2>
                <h5 class="text-primary">SIGN UP NOW TO RECEIVE HOT SPECIAL OFFERS AND INFORMATION ABOUT THE BEST TOURS!</h5>
                <form class="rd-form rd-mailform rd-form-inline subscribe-form" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="bat/rd-mailform.php">
                  <div class="form-wrap">
                    <input class="form-input" id="subscribe-form-email-5" type="email" name="email" data-constraints="@Email @Required">
                    <label class="form-label" for="subscribe-form-email-5">Enter your e-mail</label>
                    <div class="form-button">
                      <button class="button button-primary fa fa-chevron-circle-right" type="submit"></button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="footer-classic-aside">
          <div class="container">
            <div class="row justify-content-between flex-column-reverse flex-md-row row-20">
              <div class="col-xl-6 col-md-8">
                <div class="footer-classic-aside__group">
                  <!--Brand--><a class="brand" href="index.html"><img class="brand-logo-dark" src="images/logo-default-225x39.png" alt="" width="112" height="19"/><img class="brand-logo-light" src="images/logo-default-225x39.png" alt="" width="112" height="19"/></a>
                  <p class="rights"><span>Copyright</span><span>&nbsp;</span><span>&copy;&nbsp;</span><span class="copyright-year"></span><span>&nbsp;</span><span>All Rights Reserved</span> <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
                </div>
              </div>
              <div class="col-xl-3 col-md-4">
                <ul class="social-list">
                  <li class="wow fadeInUp" data-wow-delay=".1s"><a href="#"><span class="icon fa fa-facebook"></span></a></li>
                  <li class="wow fadeInUp" data-wow-delay=".2s"><a href="#"><span class="icon fa fa-twitter"></span></a></li>
                  <li class="wow fadeInUp" data-wow-delay=".3s"><a href="#"><span class="icon fa fa-instagram"></span></a></li>
                  <li class="wow fadeInUp" data-wow-delay=".4s"><a href="#"><span class="icon fa fa-pinterest"></span></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <div class="snackbars" id="form-output-global"></div>
    <script src="js/core.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>